import React from 'react'
import { Row, Col, Checkbox, Select } from 'antd'

const Option = Select.Option
import ColorPicker from 'components/ColorPicker'
const styles = require('../Workbench.less')

//chart 阴影调整

export interface IBarShadow {
  shadowType: string
  startColor: string,
  endColor: string,
}

interface IShadowProps {
  title: string
  config: IBarShadow
  onChange: (prop: string, value: any) => void
}

export class BarShadowSection extends React.PureComponent<IShadowProps, {}> {

  // private selectChange = (prop) => (value) => {
  //   this.props.onChange(prop, value)
  // }

  private colorChange = (prop) => (color) => {
    this.props.onChange(prop, color)
  }

  public render() {
    const { title, config } = this.props
    const {
      shadowType,
      startColor,
      endColor,
    } = config

    return (
      <div className={styles.paneBlock}>
        <h4>{title}</h4>
        <Row gutter={8} type="flex" align="middle" className={styles.blockRow}>
          <Col span={8}>
            起始颜色
            </Col>
          <Col span={4}>
            <ColorPicker
              value={startColor}
              onChange={this.colorChange('startColor')}
            />
          </Col>
          <Col span={8}>
            结束颜色
            </Col>
          <Col span={4}>
            <ColorPicker
              value={endColor}
              onChange={this.colorChange('endColor')}
            />
          </Col>
        </Row>
      </div>
    )
  }
}

export default BarShadowSection
